<template>
  <div class="enterprise-dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">
          <el-icon class="welcome-icon">
            <Sunny />
          </el-icon>
          {{ getGreeting() }}，{{ userInfo.name }}！
        </h1>
        <p class="welcome-desc">欢迎回到 {{ enterpriseInfo.name }} 招聘管理平台</p>
      </div>
      <div class="welcome-stats">
        <div class="stat-item">
          <div class="stat-number">{{ todayStats.newApplications }}</div>
          <div class="stat-label">今日新投递</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ todayStats.scheduledInterviews }}</div>
          <div class="stat-label">今日面试</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ todayStats.activeJobs }}</div>
          <div class="stat-label">在招职位</div>
        </div>
      </div>
    </div>

    <!-- 核心数据统计 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card jobs">
          <div class="stat-icon">
            <el-icon>
              <Briefcase />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalJobs }}</div>
            <div class="stat-label">发布职位</div>
            <div class="stat-trend positive">
              <el-icon>
                <TrendCharts />
              </el-icon>
              +{{ stats.jobsGrowth }}%
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card applications">
          <div class="stat-icon">
            <el-icon>
              <Document />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalApplications }}</div>
            <div class="stat-label">收到简历</div>
            <div class="stat-trend positive">
              <el-icon>
                <TrendCharts />
              </el-icon>
              +{{ stats.applicationsGrowth }}%
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card interviews">
          <div class="stat-icon">
            <el-icon>
              <VideoCamera />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalInterviews }}</div>
            <div class="stat-label">面试安排</div>
            <div class="stat-trend positive">
              <el-icon>
                <TrendCharts />
              </el-icon>
              +{{ stats.interviewsGrowth }}%
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card offers">
          <div class="stat-icon">
            <el-icon>
              <Medal />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalOffers }}</div>
            <div class="stat-label">发出Offer</div>
            <div class="stat-trend positive">
              <el-icon>
                <TrendCharts />
              </el-icon>
              +{{ stats.offersGrowth }}%
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="content-row">
      <!-- 左侧内容 -->
      <el-col :xs="24" :lg="16">
        <!-- 快捷操作 -->
        <el-card class="quick-actions-card">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <el-row :gutter="16">
            <el-col :xs="12" :sm="8" :md="6">
              <div class="action-item" @click="$router.push('/enterprise/jobs/create')">
                <el-icon class="action-icon">
                  <Plus />
                </el-icon>
                <div class="action-text">发布职位</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :md="6">
              <div class="action-item" @click="$router.push('/enterprise/candidates')">
                <el-icon class="action-icon">
                  <User />
                </el-icon>
                <div class="action-text">查看候选人</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :md="6">
              <div class="action-item" @click="$router.push('/enterprise/interviews')">
                <el-icon class="action-icon">
                  <VideoCamera />
                </el-icon>
                <div class="action-text">安排面试</div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="8" :md="6">
              <div class="action-item" @click="$router.push('/enterprise/offers')">
                <el-icon class="action-icon">
                  <Medal />
                </el-icon>
                <div class="action-text">发送Offer</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 最新投递 -->
        <el-card class="recent-applications-card">
          <template #header>
            <div class="card-header">
              <span>最新投递</span>
              <el-button type="text" @click="$router.push('/enterprise/candidates')">
                查看全部
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </el-button>
            </div>
          </template>
          <div class="applications-list">
            <div v-for="application in recentApplications" :key="application.id" class="application-item"
              @click="handleViewApplication(application)">
              <el-avatar :size="40" :src="application.avatar">
                <el-icon>
                  <User />
                </el-icon>
              </el-avatar>
              <div class="application-info">
                <div class="candidate-name">{{ application.candidateName }}</div>
                <div class="job-title">{{ application.jobTitle }}</div>
              </div>
              <div class="application-meta">
                <div class="apply-time">{{ formatTime(application.applyTime) }}</div>
                <el-tag :type="getStatusTagType(application.status)" size="small">
                  {{ getStatusText(application.status) }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :xs="24" :lg="8">
        <!-- 今日日程 -->
        <el-card class="schedule-card">
          <template #header>
            <div class="card-header">
              <span>今日日程</span>
              <el-button type="text" @click="$router.push('/enterprise/interviews')">
                查看全部
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </el-button>
            </div>
          </template>
          <div class="schedule-list">
            <div v-for="schedule in todaySchedule" :key="schedule.id" class="schedule-item">
              <div class="schedule-time">{{ schedule.time }}</div>
              <div class="schedule-content">
                <div class="schedule-title">{{ schedule.title }}</div>
                <div class="schedule-desc">{{ schedule.description }}</div>
              </div>
              <div class="schedule-action">
                <el-button type="text" size="small">
                  <el-icon>
                    <VideoCamera />
                  </el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 招聘漏斗 -->
        <el-card class="funnel-card">
          <template #header>
            <div class="card-header">
              <span>招聘漏斗</span>
            </div>
          </template>
          <div class="funnel-chart">
            <div v-for="(stage, index) in funnelData" :key="stage.name + index" class="funnel-stage"
              :style="{ width: `${stage.percentage}%` }">
              <div class="stage-info">
                <span class="stage-name">{{ stage.name }}</span>
                <span class="stage-count">{{ stage.count }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Sunny,
  Briefcase,
  Document,
  VideoCamera,
  Medal,
  TrendCharts,
  Plus,
  User,
  ArrowRight
} from '@element-plus/icons-vue'

const userInfo = ref({
  name: '张三',
  role: 'Admin'
})

const enterpriseInfo = ref({
  name: '阿里巴巴集团'
})

const todayStats = ref({
  newApplications: 12,
  scheduledInterviews: 5,
  activeJobs: 23
})

const stats = ref({
  totalJobs: 45,
  jobsGrowth: 12,
  totalApplications: 234,
  applicationsGrowth: 18,
  totalInterviews: 89,
  interviewsGrowth: 8,
  totalOffers: 23,
  offersGrowth: 15
})

const recentApplications = ref([
  {
    id: 1,
    candidateName: '李小明',
    jobTitle: 'Java开发工程师',
    avatar: '',
    applyTime: '2024-01-20T10:30:00',
    status: 'pending'
  },
  {
    id: 2,
    candidateName: '王小红',
    jobTitle: '前端开发工程师',
    avatar: '',
    applyTime: '2024-01-20T09:15:00',
    status: 'interview'
  },
  {
    id: 3,
    candidateName: '张小强',
    jobTitle: '产品经理',
    avatar: '',
    applyTime: '2024-01-20T08:45:00',
    status: 'offer'
  }
])

const todaySchedule = ref([
  {
    id: 1,
    time: '10:00',
    title: '技术面试',
    description: '李小明 - Java开发工程师'
  },
  {
    id: 2,
    time: '14:00',
    title: 'HR面试',
    description: '王小红 - 前端开发工程师'
  },
  {
    id: 3,
    time: '16:30',
    title: '终面',
    description: '张小强 - 产品经理'
  }
])

const funnelData = ref([
  { name: '简历投递', count: 234, percentage: 100 },
  { name: '简历筛选', count: 156, percentage: 80 },
  { name: '面试邀请', count: 89, percentage: 60 },
  { name: '面试通过', count: 45, percentage: 40 },
  { name: '发出Offer', count: 23, percentage: 20 }
])

const getGreeting = () => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  if (hour < 22) return '晚上好'
  return '夜深了'
}

const formatTime = (timeString: string) => {
  const time = new Date(timeString)
  const now = new Date()
  const diff = now.getTime() - time.getTime()
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))

  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return time.toLocaleDateString('zh-CN')
  }
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'pending': '待处理',
    'interview': '面试中',
    'offer': '已发Offer',
    'rejected': '已拒绝'
  }
  return statusMap[status] || status
}

const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    'pending': 'warning',
    'interview': 'primary',
    'offer': 'success',
    'rejected': 'danger'
  }
  return typeMap[status] || 'info'
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleViewApplication = (application: any) => {
  ElMessage.info(`查看候选人：${application.candidateName}`)
}

onMounted(() => {
  // TODO: 获取数据
})
</script>

<style scoped>
.enterprise-dashboard {
  padding: 0;
}

.welcome-section {
  background: #396afc;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, #2948ff, #396afc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #2948ff, #396afc);
  color: white;
  padding: 32px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-content {
  flex: 1;
}

.welcome-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-icon {
  font-size: 28px;
  color: #ffd700;
}

.welcome-desc {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.welcome-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  border-left: 4px solid;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.stat-card.jobs {
  border-left-color: #409eff;
}

.stat-card.applications {
  border-left-color: #67c23a;
}

.stat-card.interviews {
  border-left-color: #e6a23c;
}

.stat-card.offers {
  border-left-color: #f56c6c;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.jobs .stat-icon {
  background: #409eff;
}

.applications .stat-icon {
  background: #67c23a;
}

.interviews .stat-icon {
  background: #e6a23c;
}

.offers .stat-icon {
  background: #f56c6c;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.stat-trend.positive {
  color: #67c23a;
}

.content-row {
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.quick-actions-card {
  margin-bottom: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-item:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
  transform: translateY(-2px);
}

.action-icon {
  font-size: 24px;
  color: #409eff;
}

.action-text {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.recent-applications-card {
  margin-bottom: 20px;
}

.applications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.application-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.application-item:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.application-info {
  flex: 1;
}

.candidate-name {
  font-weight: 600;
  color: #303133;
  margin-bottom: 2px;
}

.job-title {
  font-size: 12px;
  color: #909399;
}

.application-meta {
  text-align: right;
}

.apply-time {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.schedule-card {
  margin-bottom: 20px;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-left: 3px solid #409eff;
  background-color: #f0f9ff;
  border-radius: 0 8px 8px 0;
}

.schedule-time {
  font-weight: bold;
  color: #409eff;
  min-width: 50px;
}

.schedule-content {
  flex: 1;
}

.schedule-title {
  font-weight: 600;
  color: #303133;
  margin-bottom: 2px;
}

.schedule-desc {
  font-size: 12px;
  color: #909399;
}

.funnel-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-stage {
  background: linear-gradient(90deg, #409eff, #66b1ff);
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  transition: all 0.3s;
}

.funnel-stage:hover {
  transform: translateX(4px);
}

.stage-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stage-name {
  font-size: 14px;
  font-weight: 500;
}

.stage-count {
  font-size: 16px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .welcome-section {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .welcome-stats {
    justify-content: center;
    gap: 24px;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-number {
    font-size: 24px;
  }
}
</style>
